<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
	<meta charset="utf-8" />
	<title>Form Elements Style 2 - Uix Kit</title>	
		<!-- Compatibility Settings
	============================================= -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Compatibility Settings end -->


	<!-- Web Fonts
	============================================= -->
	<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> -->
	<!-- Web Fonts  end -->

	<!-- Core & Theme CSS
	============================================= -->

	<!-- Basic  -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=4.2.1" media="all"/>
	<link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>


	<!-- Icons  -->
	<link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css?ver=5.7.0">
	<link rel="stylesheet" href="assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0">



	<!-- Theme  -->
	<link rel="stylesheet" href="../dist/css/uix-kit.min.css?ver=HLFZLG8jFPV6rS1gYFn4"/>


	<!--[if lt IE 10]>
	<link rel="stylesheet" href="assets/css/IE.css?ver=HLFZLG8jFPV6rS1gYFn4" />
	<![endif]-->


	<!-- Core & Theme CSS  end -->


	<!-- Vendor
	============================================= -->
	<script src="assets/js/wp-jquery/jquery.min.js?ver=3.3.1"></script>
	<script src="assets/js/wp-jquery/jquery.migrate.min.js?ver=1.4.1"></script>
    <script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
	<!-- Vendor  end -->



	<!-- Break free from CSS prefix hell!
	============================================= -->
	<script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>



	<!-- SEO
	============================================= -->
	<meta name="description" content="A free web kits for fast web design and development, compatible with Bootstrap v4.">
	<meta name="generator" content="Uix Kit" />  
	<meta name="author" content="UIUX Lab"> 
	<!-- SEO  end -->


	<!-- Favicons
	============================================= -->
	<link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon">
	<link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
	<link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">
	<!-- Favicons  end -->

</head>  

     
  <body class="page">
  
  
          
              
    <!-- Loader
    ============================================= -->      
    <div class="uix-loader">
        <!--[if lt IE 10]>
            <span>Loading...</span>
        <![endif]-->
        <svg class="uix-loader__spinner is-hide-IE" viewBox="0 0 52 52">
			<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
        </svg>
    </div>
    <div class="uix-loader-progress" data-txt="{progress}%"><span>0%</span></div>
    <div class="uix-loader-progress__line"></div>
    <!-- .uix-loader end -->
    

    
    <!-- Mobile Menu Toggle Trigger
    ============================================= -->    
	<div class="uix-menu-mobile__toggle">
		<span></span>
		<span></span>
		<span></span>
	</div>
    <div class="uix-menu-mobile__mask"></div>
	<!-- .uix-menu-mobile__toggle end -->

			
    
    

  
  
    <div class="uix-wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="uix-header__container">
            
             <div class="uix-header">
                 <div class="container">
                 
                                                <div class="uix-brand">
                            <a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit"></a>                       
                        </div>
                        <!-- .uix-brand end -->
                        
                        
                        
                        <!-- Navigation Start-->
                        
                        <nav class="uix-menu__container">
                               
                               <div class="uix-menu__inner">
                               
									<span class="uix-brand--mobile"><img src="assets/images/logo-colorful.png" alt="Uix Kit"></span>
									<ul class="uix-menu"> 
										<li class="multi-column current-menu-item is-active"><a href="index.html">Components</a>
											<ul class="sub-menu">

												
												<li>
													<span class="multi-column-title">Web Elements (Basic)</span>
													<ul class="sub-menu">
														<li><a href="helper-classes.html">Helper Classes</a></li>
														<li><a href="uix-grid.html">Uix Grid</a></li>
														<li><a href="bootstrap-grid.html">Bootstrap Grid</a></li>
														<li><a href="blended-grid-layout.html">Blended Grid</a></li>
                                                        <li><a href="gallery-grid-layout.html">Gallery Grid</a></li>
														<li><a href="spacing.html">Spacing</a></li>
														<li><a href="material-container.html">Material Container</a></li>
														<li><a href="striking.html">Striking</a></li>
														<li><a href="button.html">Buttons</a></li>
														<li><a href="overlay.html">Overlay</a></li>
														<li><a href="video.html">Video</a></li>
														<li><a href="video-background.html">Video BG</a></li>
														<li><a href="heading.html">Heading</a></li>
														<li><a href="dividing-line.html">Dividing Line</a></li>
														<li><a href="responsive-images.html">Responsive Images</a></li>
                                                        <li><a href="background-interaction.html">Background</a></li>
														<li><a href="parallax.html">Parallax</a></li>
														<li><a href="parallax2.html">Parallax 2</a></li>
														<li><a href="vertical-centering.html">Vertical Centering</a></li>
														<li><a href="equal-width-columns.html">Equal-width Columns</a></li>
														<li><a href="equal-height-columns.html">Equal-height Columns</a></li>
														<li><a href="align-wide-and-full-element.html">Align Wide/Full Element</a><span class="uix-bubble">new</span></li>
													</ul>
													
													<!-- .sub-menu  end -->
												</li>
												
													
												

												<li>
													<span class="multi-column-title">Web Elements (Part 1)</span>
													<ul class="sub-menu">
														<li><a href="navs.html">Navs</a></li>
														<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
														<li><a href="lightbox.html">Lightbox</a></li>
														<li><a href="modal-dialog.html">Modal Dialog</a></li>
														<li><a href="modal-dialog-auto.html">Modal Dialog Auto-open</a></li>
														<li><a href="social-meida-icons.html">Social Media Icons</a></li>
														<li><a href="form.html">Form Elements</a></li>
														<li><a href="form2.html">Form Elements 2</a></li>
                                                        <li><a href="form-layout.html">Form Layout</a></li>
														<li><a href="form-progress.html">Form Progress</a></li>
														<li><a href="counter.html">Counter</a></li>
														<li><a href="progress-bar.html">Progress Bar</a></li>
														<li><a href="progress-line.html">Progress Line</a></li>
														<li><a href="vertical-text.html">Vertical Text</a></li>
														<li><a href="circle-text.html">Circle Text</a></li>
														<li><a href="coach-mark.html">Coach Mark</a></li>
														<li><a href="separator-of-rule-with-text.html">Separator of Rule With Text</a></li>
														<li><a href="wave-background.html">Wave Background</a></li>
												        <li><a href="shape-animation.html">Shape Animation</a></li>
													    <li><a href="image-animation.html">Image Animation</a></li>
													    <li><a href="svg-map.html">SVG Map</a></li>
													    <li><a href="floating-side-element.html">Floating Side Element</a></li>
													    <li><a href="infinite-scrolling-element.html">Infinite Scrolling Element</a><span class="uix-bubble">new</span></li>
                                                        
														
													</ul>
													<!-- .sub-menu  end -->
												</li>
												
												
												<li>
													<span class="multi-column-title">Web Elements (Part 2)</span>
													<ul class="sub-menu">
														<li><a href="tooltip.html">Tooltip</a></li>
														<li><a href="ribbon.html">Ribbon</a></li>	
														<li><a href="footer-templates.html">Footer Templates</a></li>
														<li><a href="login-templates.html">Login Templates</a><span class="uix-bubble">new</span></li>
														<li><a href="pagination.html">Pagination</a></li>
														<li><a href="badges.html">Badges</a></li>
														<li><a href="mouse-animation-scroll.html">Mouse Animation Scroll</a></li>
														<li><a href="periodical-scroll.html">Periodical Scroll</a></li>	
														<li><a href="image-shapes.html">Image Shapes</a></li>
														<li><a href="rotating-elements.html">Rotating Elements</a></li>
														<li><a href="dotted-line.html">Dotted Line</a></li>
														<li><a href="flexslider.html">Flexslider</a></li>
														<li><a href="flexslider2.html">Flexslider Fullscreen</a></li>
														<li><a href="advanced-slider.html">Advanced Slider (Basic)</a></li>
														<li><a href="advanced-slider-brightness.html">Advanced Slider Brightness</a></li>
														<li><a href="advanced-slider-liquid.html">Advanced Slider Liquid</a></li>
														<li><a href="advanced-slider-liquid2.html">Advanced Slider Liquid 2</a></li>
														<li><a href="advanced-slider-liquid3.html">Advanced Slider Liquid 3</a></li>
														<li><a href="advanced-slider-parallax.html">Advanced Slider Parallax</a></li>
														<li><a href="hybrid-content-slider.html">Hybrid Content Slider</a><span class="uix-bubble">new</span></li>
														<li><a href="3D-explosive-particle-slider.html">3D Explosive Particle Slider</a></li>
														<li><a href="3D-shatter-slider.html">3D Shatter Slider</a></li>
                                                        <li><a href="3D-liquid-scrollspy-slider.html">3D Liquid Scrollspy Slider</a><span class="uix-bubble">new</span></li>
															
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>
												

			
												<li>
													<span class="multi-column-title">Contents (Part 1)</span>
													<ul class="sub-menu">
														
														<li><a href="content-placeholder-animated.html">Content Placeholder Animated</a></li>
														<li><a href="list-posts.html">Posts List</a></li>
														<li><a href="fullwidth-column-to-edge.html">Full Width Column to Edge</a><span class="uix-bubble">new</span></li>
														<li><a href="list-side-by-side.html">Side by Side List</a></li>
														<li><a href="list-side-by-side-img.html">Side by Side List With Photo</a></li>
														<li><a href="list-bulleted.html">Bulleted List</a></li>
														<li><a href="list-brands.html">Brands List</a></li>
														<li><a href="list-maintain-aspect-ratio.html">Maintain Aspect Ratio List</a></li>
														<li><a href="single-post.html">Single Post</a></li>
														<li><a href="sidebar.html">Sidebar</a></li>
														<li><a href="contact.html">Contact Form With Map</a></li>
														<li><a href="features.html">Features</a></li>
														<li><a href="pricing.html">Pricing</a></li>
														<li><a href="testimonials.html">Testimonials</a></li>
														<li><a href="tabs.html">Tabs</a></li>
														<li><a href="accordion.html">Accordion</a></li>
														<li><a href="accordion-img.html">Accordion Background Images</a></li>
														<li><a href="gallery.html">Gallery Normal</a></li>
														<li><a href="gallery-filter.html">Gallery Filterable</a></li>
														<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
														<li><a href="gallery-masonry-ajax.html">Gallery Masonry With Ajax</a><span class="uix-bubble">new</span></li>
														
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>
												
												<li>
													<span class="multi-column-title">Contents (Part 2)</span>
													<ul class="sub-menu">
														<li><a href="card.html">Cards</a></li>
														<li><a href="table-series.html">Table</a></li>
														<li><a href="table-sorter.html">Table Sorter</a></li>	
														<li><a href="timeline.html">Timeline</a></li>
														<li><a href="multi-items-carousel.html">Multiple Items Carousel</a></li>
														<li><a href="team-fullwidth.html">Team Fullwidth</a></li>
														<li><a href="team-grid.html">Team Grid</a></li>
														<li><a href="team-focus.html">Team Focus</a></li>
														<li><a href="circle-layout.html">Circle Layout</a></li>
														<li><a href="3D-carousel.html">3D Carousel</a></li>
														<li><a href="3D-gallery.html">3D Gallery (threejs)</a></li>
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>	
		
												
												<li>
													<span class="multi-column-title">Interaction (Part 1)</span>
													<ul class="sub-menu">
														<li><a href="sticky-elements.html">Sticky Elements</a></li>
														<li><a href="scroll-reveal.html">Scroll Reveal</a></li>
														<li><a href="scrollspy-animate.html">Scrollspy Animate</a><span class="uix-bubble">new</span></li>
														<li><a href="skew-on-scroll.html">Skew on Scroll</a><span class="uix-bubble">new</span></li>
														<li><a href="text-effect.html">Text Effect</a><span class="uix-bubble">new</span></li>
                                                        <li><a href="smooth-scrolling-page.html">Smooth Scrolling Page</a></li>
														<li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li>
														<li><a href="list-posts-with-ajax2.html">Ajax Load Posts 2</a></li>
														<li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li>
														<li><a href="show-more-less.html">Show More Less</a></li>
														<li><a href="mousewheel-interaction.html">Mousewheel Interaction</a></li>
														<li><a href="hover-delay-interaction.html">Hover Delay Interaction</a></li>
														<li><a href="dynamic-dropdown-list-json.html">Dynamic Drop Down List</a></li>
														<li><a href="one-page.html">Full Page/One Page</a></li>
														<li><a href="one-page2.html">Full Page/One Page 2</a></li>
														<li><a href="ajax-page-loader.html">Ajax Page Loader</a></li>
														<li><a href="ajax-push-content.html">Ajax Push Content</a></li>
														<li><a href="3D-background.html">3D Background</a></li>
														<li><a href="3D-background-three.html">3D Background 1 (threejs)</a></li>
														<li><a href="3D-background-three2.html">3D Background 2 (threejs)</a></li>
														<li><a href="3D-background-three3.html">3D Background 3 (threejs)</a></li>

															
															
															
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>

												
												
												<li>
													<span class="multi-column-title">Interaction (Part 2)</span>
													<ul class="sub-menu">
														<li><a href="3D-pages.html">3D Pages</a></li>
														<li><a href="3D-particle-effect.html">3D Particle Effect</a></li>
														<li><a href="3D-sphere-three.html">3D Sphere Rotation</a></li>
														<li><a href="3D-obj-anim-interaction.html">3D Object Anim Interaction</a></li>
														<li><a href="3D-image-transition.html">3D Image Transition (threejs)</a></li>
														<li><a href="3D-mouse-interaction.html">3D Mouse Interaction (threejs)</a></li>
														<li><a href="3D-mouse-interaction2.html">3D Mouse Interaction2 (threejs)</a></li>
														<li><a href="3D-model.html">3D Model</a></li>			
														<li><a href="3D-filmic-effects.html">3D Filmic Effects</a><span class="uix-bubble">new</span></li>			
                                                        
														
													</ul>
													<!-- .sub-menu  end -->
												</li>					
												
											
											</ul>

										</li>
										<li><a href="#">Menu</a>
											<ul class="sub-menu">
												<li><a href="mega-menu.html">Mega Menu</a></li>
												<li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li>
												<li><a href="dropdown-menu.html">Dropdown Menu</a></li>
												<li><a href="dropdown-menu2.html">Dropdown Menu 2(Multi-level)</a></li>
												<li><a href="vertical-menu.html" target="_blank">Vertical Menu</a></li>
												<li><a href="lava-lamp-style-menu.html">Lava-Lamp Style Menu</a><span class="uix-bubble">new</span></li>
												
												

											</ul>
											<!-- .sub-menu  end -->
										</li>

										<li><a href="typography.html">Typography</a>
											<ul class="sub-menu">
												<li><a href="typography.html">LTR</a></li>
												<li><a href="typography-rtl.html">RTL</a></li>
												<li><a href="typography-cn.html">中文</a></li>

											</ul>
										</li>
										
										
										<li><a href="sample-page-1.html">Sample Pages</a>
											<ul class="sub-menu">
												<li><a href="sample-page-1.html">Sample Page 1</a></li>
												<li><a href="sample-page-2.html">Sample Page 2</a></li>

												
											</ul>
										</li>
										
										

									</ul>
									<div class="uix-menu__right-box">
										<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
											<i class="fa fa-twitter"></i>
										</a>
										<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
											<i class="fa fa-facebook"></i>
										</a>
										<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
											<i class="fa fa-github"></i>
										</a>          
									</div>
                               
							   </div><!-- /.uix-menu__inner -->
        
                        </nav>
                        <!-- .uix-menu__container end -->
                        
                 
                   
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="uix-clearfix"></div>
             </div>
        
        </header>
        <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
      
     
		<main id="uix-maincontent">
			
			<!-- Content 
			====================================================== -->
			<section class="uix-spacing--s uix-spacing--no-bottom">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<h3>Inputs</h3>
							<hr>
							
							
						</div>
					</div>
					<!-- .row end -->

				</div>
				<!-- .container end -->

			</section>
			
			


		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">


						<div class="row">
							<div class="col-12">



									 <form method="post" action="#" id="app-my-form">


									   <div class="row">
											<div class="col-12">

												Text: 
												<div class="uix-controls uix-controls--line">
												  <input type="text" class="js-uix-float-label" value="" name="sname" maxlength="50">
												  <label>Input Normal</label>

												</div>

												Text: 
												<div class="uix-controls uix-controls--line">
												  <input type="text" class="js-uix-float-label" value="" name="ename" maxlength="50">
												  <label>Input Normal</label>
												</div>



											</div>  


										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-success">
												  <input type="text" class="js-uix-float-label" value="Success" name="sname" maxlength="50">
												  <label>Input Name</label>

												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-error">
												  <input type="text" class="js-uix-float-label" value="Error" name="ename" maxlength="50">
												  <label>Input Name</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-disabled">
												  <input type="text" class="js-uix-float-label" value="Text" name="d-name" disabled>
												  <label>Disabled Input</label>

												</div>

											</div>  

											<div class="col-sm-6 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select is-disabled">
													<label>
														<select name="selectname">
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>
													<span>Disabled Select</span>

												</div>
											</div>  			


										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth">
												  <input type="text" class="js-uix-float-label required" name="first-name">
												  <label>First Name<span class="uix-controls__im">*</span></label>
												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth">
												  <input type="text" class="js-uix-float-label" name="last-name">
												  <label>Last Name</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  


									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic">
												  <i class="fa fa-user-o" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label required" name="first-name">
												  <label>With Icons<span class="uix-controls__im">*</span></label>
												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic">
												  <i class="fa fa-feed" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label" name="last-name">
												  <label>With Icons</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  




									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic is-reversed">
												  <i class="fa fa-user-o" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label" name="first-name">
												  <label>With Icons</label>
												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic is-reversed">
												  <i class="fa fa-feed" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label" name="last-name">
												  <label>With Icons</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line uix-controls__normal-select">
													<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
													<select name="country">
														<option value="Option 1">Option 1</option>
														<option value="Option 2">Option 2</option>
														<option value="Option 3">Option 3</option>
													</select>
													<label>Select</label>


												</div>


												<div class="uix-controls uix-controls--line uix-controls__normal-select">
													<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
													<select name="country">
														<option value="Option 1">Option 1</option>
														<option value="Option 2">Option 2</option>
														<option value="Option 3">Option 3</option>
													</select>
													<label>Select</label>


												</div>


											</div>  

										</div>
										<!-- .row end --> 	


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__normal-select is-fullwidth">
													<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
													<select class="js-uix-float-label">
														<option value="blank"></option>
														<option value="Apple">Apple</option>
														<option value="Banana">Banana</option>
														<option value="Kiwi">Kiwi</option>
														<option value="Orange">Orange</option>
														<option value="Watermelon">Watermelon</option>
													</select>
													<label>Select Arrow</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 		



									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select">
													<label>
														<select name="selectname">
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>
													<span>Custom Select</span>

												</div>

											</div>  

										</div>
										<!-- .row end --> 		


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select is-fullwidth">
													<label>
														<select name="selectname">
															<option value="">Full Width Select</option>
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>

												</div>

											</div>  

										</div>
										<!-- .row end -->  	 	 	 	 	  	  	 


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select uix-controls__select--top is-pill">
													<label>
														<select name="selectname">
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>
													<span>Custom Select -Converse</span>

												</div>

											</div>  

										</div>
										<!-- .row end --> 		 	     	 	 	 	 	 




									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-s">
												  <input type="text" class="js-uix-float-label" name="shortinput1">
												  <label>Short Input 1</label>unit
												</div>
											</div>  

										</div>
										<!-- .row end -->



									   <div class="row">
											<div class="col-12 uix-t-m">
												<div class="uix-controls uix-controls--line uix-controls__short-m">
												  <input type="text" class="js-uix-float-label" name="shortinput1">
												  <label>Short Input 2</label>unit
												</div>
											</div>  

										</div>
										<!-- .row end -->         


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-l">
												  <input type="text" class="js-uix-float-label" name="shortinput2">
												  <label>Short Input 3</label>unit
												</div>
											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__multi-sel" data-targetid="my-multi-selector-name-1">
													<span aria-checked="false" role="checkbox" data-value="1">facebook<i class="fa fa-check no"></i></span>
													 <span aria-checked="false" role="checkbox" data-value="2">twitter<i class="fa fa-check no"></i></span>
													 <span aria-checked="false" role="checkbox" data-value="3">google_plus<i class="fa fa-check no"></i></span>
													 <span aria-checked="false" role="checkbox" data-value="4">pinterest<i class="fa fa-check no"></i></span>
												</div>

												<input type="hidden" id="my-multi-selector-name-1" name="my-multi-selector-name-1" value="1,3">

											</div>  

										</div>
										<!-- .row end -->



									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__single-sel" data-targetid="my-cus-radio-name-1">
													 <span aria-checked="false" role="radio" data-value="1">facebook</span>
													 <span aria-checked="false" role="radio" data-value="2">twitter</span>
													 <span aria-checked="false" role="radio" data-value="3">google_plus</span>
													 <span aria-checked="false" role="radio" data-value="4">pinterest</span>
												</div>

												<input type="hidden" id="my-cus-radio-name-1" name="my-cus-radio-name-1" value="2">

											</div>  

										</div>
										<!-- .row end -->




									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-l uix-controls__date">
												  <input  type="text" class="js-uix-float-label" name="shortinput3"
														  autocomplete="off" 
														  data-picker="true" 
														  data-picker-min-date="0"
														  data-picker-max-date="+2050/01/01"
														  data-picker-format="Y-m-d H:i:s" 
														  data-picker-timepicker="true" 
														  data-picker-lang="en">
												  <label>Date 1</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->    

									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-l uix-controls__date">
												  <input  type="text" class="js-uix-float-label" name="shortinput3-2"
														  autocomplete="off" 
														  data-picker="true" 
														  data-picker-min-date="-2016/01/01"
														  data-picker-max-date="0"
														  data-picker-format="M d, Y" 
														  data-picker-timepicker="false" 
														  data-picker-lang="en">
												  <label>Date 2</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->   			 




									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line is-fullwidth">
													<input type="text" class="js-uix-float-label" name="name">
													<label>Name</label>
												</div>
											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line is-fullwidth">
													<input type="tel" class="js-uix-float-label" name="cell">
													<label>Celly</label>
												</div>
											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__textarea is-fullwidth">
												  <textarea rows="5" name="comments" class="js-uix-float-label"></textarea>
												  <label>Comments</label>
												</div>
											</div>  

										</div>
										<!-- .row end -->          



									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__radio">
													<label>
														<input type="radio" name="radioname" checked>Radio Name
													</label>
													<label>
														<input type="radio" name="radioname">Radio Name
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 	   
                                         
                                         

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__radio is-disabled">
													<label>
														<input type="radio" name="radioname2">Disabled Radio Name 1
													</label>
													<label>
														<input type="radio" name="radioname2" checked>Disabled Radio Name 2
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 	    
  


									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__checkbox">
													<label>
														<input type="checkbox" name="checkboxname">Checkbox
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__checkbox is-disabled">
													<label>
														<input type="checkbox" name="checkboxname">Disabled Checkbox
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 



									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls--line uix-controls__number">
													<input type="number" step="0.01" min="0" class="js-uix-float-label" name="numberdemo1" value="1">
													<span class="uix-controls__number__btn uix-controls__number__btn--add" data-step="1">+</span>
													<span class="uix-controls__number__btn uix-controls__number__btn--remove" data-step="1">-</span>
												</div>

											</div>  

										</div>
										<!-- .row end --> 	     


									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__toggle is-disabled" data-off-text="off" data-on-text="on">
													<label>
														<input type="checkbox" name="togglename">
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->       
                                         

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__toggle" data-off-text="off" data-on-text="on">
													<label>
														<input type="checkbox" name="togglename">
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->            	 	 	 

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__toggle is-pill" data-off-text="off" data-on-text="on" data-targetid="my-toggle-name-1">
													<label>
														<input type="checkbox" name="togglename2" checked>
													</label>
												</div>

												<div id="my-toggle-name-1" style="padding: 10px; background: #d2ff52; background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); margin: 5px 0 15px 0; max-width: 300px;">Switch</div>

											</div>  

										</div>
										<!-- .row end -->   


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls__file-container uix-t-l">  
													<input type="file" id="my-file">
													<label tabindex="0" for="my-file" class="uix-controls__file-trigger"><i class="fa fa-upload" aria-hidden="true"></i>Upload File</label>
												</div>
												<p class="uix-controls__file-return uix-t-l"></p>

											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls__file-field-container">
													<div class="uix-controls__file-field-trigger">
													  <div>
														  <input type="file" accept="image/*"  data-title="Drag and drop a file here">
													  </div>
													</div>

												</div>

											</div>  

										</div>
										<!-- .row end -->							 


									   <div class="row">
											<div class="col-12 uix-t-l">
												<p class="uix-t-l">
												  <button type="submit" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Submit Your Info</button>
												</p> 

											</div>  

										</div>
										<!-- .row end -->   


									   <span class="response"></span>

									</form>


							</div>     


						</div>
						<!-- .row end -->  


				</div>
				<!-- .container end -->



			</section>
			
		</main>
		
		
			
        

        
                <!-- Footer
        ============================================= -->    
        <footer class="uix-footer__container">
            <div class="uix-footer">
            
				<div class="container">
					<hr>
					
					<div class="row">
						<div class="col-lg-6 col-md-6 uix-t-l uix-mobile-tc">

							Copyright &copy; Uix Kit 2019.  |  All rights reserved. Created by <a href="https://uiux.cc">UIUX Lab</a>.
						</div>
						<div class="col-lg-6 col-md-6 uix-t-r uix-mobile-tc">
							<div class="uix-footer__menu">
								<ul>
									<li>
										<a href="https://uiux.cc" target="_blank">
											UIUX Lab
										</a>
									</li>
									<li>
										<a href="https://opensource.org/licenses/MIT" target="_blank">
											Licenses
										</a>
									</li>
									<li>
										<a href="https://github.com/xizon/uix-kit" target="_blank">
											Download
										</a>
									</li>

									<li>
										<a href="https://github.com/xizon/uix-kit/wiki/Getting-Started" target="_blank">
											Documentation
										</a>
									</li>


								</ul>
							</div>

						</div>
					</div>

				</div><!-- .container  end -->
				
			</div>
        </footer>


        
        
    </div>
    <!-- .uix-wrapper end -->
       
	  

	<script>
	( function( $ ) {
	"use strict";

		$( function() {

			/* 
			 ---------------------------
			 Input Validation 
			 ---------------------------
			 */ 
			$(document).off( 'submit' ).on( 'submit', '#app-my-form', function(e) {

				var $form        = $( this ),
					validationOK = true,
					emailRe      = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm,
					numReg       = /^\d+$/;


				//Radio
				var radioVal = $form.find( '[name="radioname"]:checked' ).val();

				if ( radioVal == '' || typeof radioVal == typeof undefined ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> This value of radio cannot be left blank.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );	

					validationOK = false;
				}


				//Email
				var emailVal = $form.find( '[name="email"]' ).val();
				if ( emailVal != '' && !emailRe.test( emailVal ) && typeof emailVal != typeof undefined ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> A valid email address.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );

					$form.find( '[name="email"]' ).focus();

					validationOK = false;
				}


				//Required Fields
				$form.find( '.required' ).each( function()  {


					if ( $( this ).val() == '' ) {

						var _ft = $( this )
										.closest( '.row' )
										.find( '[class*=col-]' )
										.html();


						if ( _ft.indexOf( '</select>' ) >= 0 ) {
							_ft = _ft.replace(/<select[\s\S]*<\/select>/ig, '' )
									 .replace(/<span\sclass=\"uix-controls\_\_select\-trigger\">[\s\S]*<\/span>/ig, '' );


						}


						var info = _ft.replace(/(&nbsp;|<([^>]+)>|\*)/ig, '' );

						$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> "'+info+'" Can not be empty.</p>' );

						setTimeout( function(){
							$form.find( '.response' ).html( '' );
						}, 3000 );

						$( this ).focus();

						validationOK = false;

						//break this loop
						return false;

					}



				});




				//Checkbox
				if ( validationOK && !$form.find( '[name="checkboxname"]' ).get(0).checked ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> This value of checkbox cannot be left blank.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );	

					validationOK = false;
				}



				if ( validationOK ) {
					return true;
				} else {
					return false;
				}

			});  	


		} );


	} ) ( jQuery );	

	</script> 

	  
       
      

    <!-- Vendor -->
	<script defer src="assets/js/min/axios.min.js?ver=0.19.2"></script>
    <script defer src="assets/js/min/jquery.waitforimages.min.js?ver=1.0"></script>
    <script defer src="assets/js/min/video.min.js?ver=7.5.3"></script>
    <script defer src="assets/js/min/template7.min.js?ver=1.4.2"></script>
    <script defer src="assets/js/min/TweenMax.min.js?ver=2.0.2"></script>
    <script defer src="assets/js/min/pixi.min.js?ver=5.2.0"></script>
    <script defer src="assets/js/min/three.min.js?ver=r114"></script>
    <script defer src="assets/js/min/anime.min.js?ver=3.1"></script>
    <script defer src="assets/js/min/hammer.min.js?ver=2.0.8"></script>
    <script defer src="assets/js/min/muuri.min.js?ver=0.8.0"></script>


    
	<!-- Your Plugins & Theme Scripts
	============================================= -->
	
	<script>
        /*
        * Some global vars. DO NOT change these variables names. 
        * These variables are being used in `uix-kit.min.js`.
        *    
        */ 
		var REVISION     = "4.3.5",
			APP_ROOTPATH = {
				"templateUrl" : "", //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog"
				"homeUrl"     : "",  //Eg. https://uiux.cc
				"ajaxUrl"     : ""   //Eg. https://uiux.cc/wp-admin/admin-ajax.php
			};
        

        /*
        * Fixed a bug that Cannot read property 'fn' of undefined for jQuery 1.xx.x.
        *    
        */
        window.$ = window.jQuery;
    </script>  
    <script defer src="../dist/js/uix-kit.min.js?ver=HLFZLG8jFPV6rS1gYFn4"></script>
	<!-- Your Plugins & Theme Scripts  end -->
    

	<script>
			/* Google analytics */
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.defer=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-70658525-1', 'auto');
			ga('send', 'pageview');

	</script> 
    

  </body>
</html>


